userProtalNickName<template>
	<!-- 提交订单页面 -->
	<view class="order-submit">
		<view class="order-submit-box">
			<view class="order-address-box">
				<view @click="userAddressShow = true" v-for="item in userAddressList">
					<view class="order-address" v-if="item.id === addressDefault">
						<p class="order-address-itemaddress">{{item.address}}</p>
						<p class="order-address-itemconsignee">
							<text>{{item.consignee}}</text>
							<text style="margin-left: 20px;">{{item.phone}}</text>
						</p>
						<u-icon style="position: absolute;right: 10px;top: 40px;" name="arrow-right" size="18"></u-icon>
					</view>
				</view>
				<view class="deliveryTime-box">
					<label style="float:left" for="">预计送达：</label>
					<u-icon style="float:right;margin-top: 20px;" name="arrow-right" size="18"></u-icon>
					<text style="float:right; margin-right: 10px;">{{deliveryTime}}</text>
				</view>
				<view class="pay-mode-box">
					<label style="float:left" for="">支付方式：</label>
					<u-icon style="float:right;margin-top: 20px;" name="arrow-right" size="18"></u-icon>
					<text style="float:right; margin-right: 10px;">{{payModeText}}</text>
				</view>
			</view>
			<view class="order-commodityContent">
				<!-- 店铺名称 -->
				<text class="commodity-content-shopName">{{shopForm.shopName}}</text>
				<!-- 商品信息列表展示 -->
				<view class="order-commodityContent-list-box">
					<view class="commodity_item" v-for="(item,index) in commodityList">
						<image class="commodity_item_image" :src='`http://localhost:15000/eat-service/fileManager/getImageById?id=` + item.imageId' mode=""></image>
						<view class="commodity_item_textbox">
							<p class="commodity_item_name">{{item.commodityName}}</p>
							<p>x1</p>
							<view class="commodity_item_price_box">
								<p class="commodity_item_price">
									￥{{item.price}}
								</p>
								<p class="commodity_item_priced">￥{{item.priced}}</p>
							</view>
						</view>
					</view>
					<view style="margin-top: 10px;">
						<view class="pack-price-box">
							<p style="font-weight: bold;">包装费</p>
							<p style="position: absolute;right:0;top: 0">￥{{orderForm.sumPackPrice}}</p>
						</view>
						<view class="pack-price-box">
							<p style="font-weight: bold;">配送费</p>
							<p style="position: absolute;right:0;top: 0">￥{{orderForm.distributionPrice}}</p>
						</view>
					</view>
				</view>
			</view>
			<!-- 优惠选择 -->
			<view class="order-discounts-box">
				<u-form :model="orderForm">
					<u-form-item label="优惠卷" label-width='120px' @click="discountsShow = true">
						<u--input
							v-model="couponContext"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择优惠卷"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
				</u-form>
			</view>
			<view class="order-else-box">
				<u-form :model="orderForm">
					<u-form-item label="备注" label-width='120px'>
						<u--textarea
							v-model="orderForm.remark" 
						></u--textarea>
					</u-form-item>
					<u-form-item label="餐具数量" label-width='120px' @click="sumTablewareShow = true">
						<u--input
							v-model="orderForm.sumTableware"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择所分配的菜单"
							border="none"
						></u--input>
						<u-icon
							slot="right"
							name="arrow-right"
						></u-icon>
					</u-form-item>
				</u-form>
			</view>
			<view class="taking-order-box">
				<!-- <text>
					已优惠：
					<text>￥{{}}</text>
				</text> -->
				<view class="order-price-total-box">
					合计：
					<text style="font-size: 22px;font-weight: bold;">￥{{orderForm.sumOrderPrice}}</text>
				</view>
				<u-button 
					@click="goOrderSubmit" 
					class="taking-order-btn" 
					type="primary" shape="circle" 
					>
					提交订单
				</u-button>
			</view>
		</view>
		<!-- 用户收货地址 弹出层 -->
		<u-popup :show="userAddressShow" @close="closeUserAddress">
			<view class="u-popup-slot-address">
				<view v-for="item in userAddressList" class="popup-address-item">
					<p class="popup-address-item-itemaddress">{{item.address}}</p>
					<p class="popup-address-item-itemconsignee">
						<text>{{item.consignee}}</text>
						<text style="margin-left: 20px;">{{item.phone}}</text>
					</p>
					<u-button @click="changeAddress(item.id)" class="popup-address-item-btn" type="primary" text="选择"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 餐具选择器 -->
		<u-picker
		:show="sumTablewareShow" 
		:columns="sumTablewareList"
		@confirm="sumTablewareConfirm"
		@cancel="sumTablewareShow = false"
		keyName="name"></u-picker>
		<!-- 优惠卷弹出层 -->
		<view>
			<u-popup :show="discountsShow" @close="discountsClose" @open="discountsOpen">
				<view class="u-popup-slot-discounts">
					<u-button @click="cancelCoupon()" type="primary" :plain="true" text="取消使用优惠卷"></u-button>
					<text>店铺</text>
					<view class="shopCoupon-item-box" v-for="item in shopCouponList" :key="item.id">
						<view class="shopCoupon-item-box-header">
							<view style="color:#FE4D35;" class="">
								￥
								<text style="font-weight: bold;font-size: 26px;">{{item.couponPrice}}</text>
							</view>
							<view v-if="item.eatBean === 0">
								无门槛
							</view>
							<view v-if="item.eatBean !== 0">
								满{{item.eatBean}}可用
							</view>
						</view>
						<view class="shopCoupon-item-box-main">
							<text style="font-size: 16px;font-weight: bold">{{item.couponName}}</text>
							<br>
							<text>{{item.updateTime}}到期</text>
						</view>
						<view class="shopCoupon-item-box-foot">
							<u-button v-show="orderForm.sumOrderPrice >= item.eatBean" @click="useCoupon(item)" style="margin-top:10px;width: 35px;" type="primary" :plain="true" text="使用"></u-button>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import userAddress from '../../components/user-detailed-address/user-detailed-address.vue'
	export default {
		components: {
			userAddress
		},
		data() {
			return {
				// 地址默认选中
				addressDefault: 0,
				// 优惠卷显示状态
				discountsShow: false,
				// 选购商品id数组
				commodityList: [],
				// 店铺id
				shopId: '',
				// 用户地址 弹出层状态
				userAddressShow: false,
				// 存放店铺信息
				shopForm: {},
				// 商品总价格
				sumCommodityPrice: 0,
				// 存放用户收货地址信息列表
				userAddressList: [],
				// 获取预计送达时间
				deliveryTime: '',
				// 总出餐时间
				sumMealTime: 0,
				// 支付方式
				payModeText: '支付宝',
				// 用户当前经度
				userLat: '',
				// 用户当前纬度
				userLng: '',
				// 订单对象
				orderForm: {
					// 备注
					remark: '',
					// 餐具数量
					sumTableware: '1个',
					// 用户地址id
					userAddressId: '',
					// 用户id
					userProtalId: uni.getStorageSync('id'),
					// 店铺详细地址
					shopAddress: '',
					// 省id
					provinceId: '',
					// 市id
					cityId: '',
					// 县id
					countyId: '',
					// 配送费
					distributionPrice: 0,
					// 选购商品信息列表
					sumList: [],
					// 店铺id
					shopId: '',
					// 订单金额
					sumOrderPrice: 0,
					// 包装费
					sumPackPrice: 0,
					// 用户当前经度
					userLat: '',
					// 用户当前纬度
					userLng: '',
					// 店铺经度
					shopLat: '',
					// 店铺纬度
					shopLng: '',
					// 获取预计送达时间
					deliveryTime: '',
					// 订单重量
					weight: '',
					// 店铺名称
					shopName: '',
					// 优惠价格
					couponPrice: 0
				},
				// 餐具数量选择器状态
				sumTablewareShow: false,
				// 餐具数量选择器信息列表
				sumTablewareList: [
					[
						{
							name: '商家依据餐量提供',
						},
						{
							name: '1份'
						},
						{
							name: '2份',
						},
						{
							name: '3份'
						},
						{
							name: '4份',
						},
						{
							name: '5份'
						},
						{
							name: '6份',
						},
						{
							name: '备注份数'
						}
					]
				],
				// 存放用户拥有店铺优惠卷
				shopCouponList: [],
				// 存放用户拥有app优惠卷
				appCouponList: [],
				// 表单优惠卷内容
				couponContext: '未选择',
			}
		},
		onLoad: function(option){
			const commodityData = JSON.parse(decodeURIComponent(option.commodity))
			this.commodityList = commodityData.commodityList
			// 店铺Id
			this.orderForm.shopId = commodityData.shopId
			// 总价格
			this.orderForm.sumOrderPrice = commodityData.sumPrice
			// 总包装费
			this.orderForm.sumPackPrice = commodityData.sumPackPrice
			// 配送费
			this.orderForm.distributionPrice = commodityData.distributionPrice
			// 总出餐时间
			this.sumMealTime = commodityData.sumMealTime
			// 总重量（g)
			this.orderForm.weight = commodityData.sumWeight
		},
		created () {
			// 初始化 根据id获取店铺信息
			this.getShopFormById()
			// 初始化获取用户 录入常用地址
			this.getUserProtalAddress()
			// 初始化根据用户id获取 店铺优惠卷信息列表
			this.listShopCouponStatisticByUserId()
		},
		mounted () {
			const timer = setInterval(()=>{
				this.getDeliveryTime()
			}, 60000) // 每一分钟执行1次
			// 通过$once来监听定时器，在beforeDestroy钩子可以被清除
			this.$once('hook:beforeDestroy',()=>{
				// 在页面销毁时，销毁定时器
				clearInterval(timer)
			})
		},
		watch: {
			userLat (newData) {
				// 获取订单预计送达时间
				this.getDeliveryTime()
			},
			shopForm (newData) {
				// 初始化 获取用户当前经纬度
				this.getUserLatLng()
			}
		},
		methods: {
			// 取消使用优惠卷
			cancelCoupon () {
				this.couponContext = '未使用'
				this.discountsShow = false
				this.orderForm.sumOrderPrice += this.orderForm.couponPrice
				this.orderForm.couponPrice = 0
			},
			// 使用优惠卷
			useCoupon (coupon) {
				this.orderForm.sumOrderPrice -= coupon.couponPrice
				this.orderForm.couponPrice = coupon.couponPrice
				this.discountsShow = false
				this.couponContext = coupon.couponName
			},
			// 根据用户id获取 店铺优惠卷信息列表
			listShopCouponStatisticByUserId () {
				this.$myRequest({
					url: '/eat-service/shopCouponStatistic/listShopCouponStatisticByUserId',
					method: 'GET',
					data: {
						userProtalId: this.orderForm.userProtalId,
						shopId: this.orderForm.shopId,
					}
				}).then(res => {
					this.shopCouponList = res.data.obj
				})
			},
			// 选中用户收货地址
			changeAddress(addressId){
				this.orderForm.userAddressId = addressId
				this.addressDefault = addressId
				this.userAddressShow = false
			},
			// 优惠卷打开方法
			discountsOpen() {
				// console.log('open');
			},
			// 优惠卷弹出层关闭方法
			discountsClose() {
				this.discountsShow = false
				// console.log('close');
			},
			// 提交订单
			goOrderSubmit () {
				this.orderForm.sumList = []
				this.commodityList.forEach((item,itemIndex) => {
					var form = {
						id: item.id,
						commodityName: item.commodityName,
						sum: 1
					}
					var i = 0
					this.orderForm.sumList.forEach((ele,eleIndex) => {
						if (item.id === ele.id) {
							this.orderForm.sumList[eleIndex].sum++;
							i++
						}
					})
					if (i === 0){
						this.orderForm.sumList.push(form)
					}
				})
				this.orderForm.deliveryTime = this.deliveryTime
				this.$myRequest({
					url: '/eat-service/commodityOrder/submitCommodityOrder',
					method: 'POST',
					data: this.orderForm,
					dataType: 'json'
				}).then(res => {
					if (res.data.code === '401') {
						console.log(res.data)
					} else {
						
					}
				})
			},
			// 餐具数量选择器
			sumTablewareConfirm (e) {
				console.log(e)
				this.orderForm.sumTableware = e.value[0].name
				this.sumTablewareShow = false
			},
			// 获取当前用户 经纬度
			getDeliveryTime () {
				this.$myRequest({
					url: '/eat-service/commodityOrder/getDeliveryTime',
					data: {
						userLat: this.userLat,
						userLng: this.userLng,
						shopLat: this.shopForm.lat,
						shopLng: this.shopForm.lng,
						sumMealTime: this.sumMealTime
					}
				}).then(res => {
					this.deliveryTime = res.data.obj.deliveryTime
				})
			},
			// 获取用户当前经纬度
			getUserLatLng () {
				var that = this
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: function (res) {
						that.userLat = res.latitude
						that.userLng = res.longitude
						that.orderForm.userLat = res.latitude
						that.orderForm.userLng = res.longitude
					}
				})
			},
			// 获取用户 录入常用地址
			getUserProtalAddress () {
				this.$myRequest({
					url: '/eat-service/userAddress/getUserProtalAddress',
					data: {
						userId: uni.getStorageSync("id")
					}
				}).then(res => {
					this.userAddressList = res.data.obj
					this.userAddressList.forEach((item,index) => {
						if (item.addressType === 0) {
							this.orderForm.userAddressId = item.id
							this.addressDefault = item.id
						}
					})
				})
			},
			// 根据id获取店铺信息
			getShopFormById () {
				this.$myRequest({
					url: '/eat-service/shop/getShopFormById',
					data: {
						id: this.orderForm.shopId
					}
				}).then(res => {
					this.shopForm = res.data.obj
					this.orderForm.shopAddress = this.shopForm.address
					this.orderForm.shopLat = this.shopForm.lat
					this.orderForm.shopLng = this.shopForm.lng
					this.orderForm.provinceId = this.shopForm.provinceId
					this.orderForm.cityId = this.shopForm.cityId
					this.orderForm.countyId = this.shopForm.countyId
					// 店铺名称
					this.orderForm.shopName = this.shopForm.shopName
				})
			},
			// 关闭 购物车弹框 方法
			closeUserAddress() {
				this.userAddressShow = false
			},
		}
	}
</script>

<style>
.order-submit{
	width: 100%;
	height: 852px;
	background-image: linear-gradient(to top, #F7F7F7 30%, #0BAFF5 100%);
}
.order-submit-box{
	width: 95%;
	height: 792px;
	margin: 0 auto;
	overflow: hidden;
	overflow: scroll;
}
.order-commodityContent{
	width: 95%;
	background-color:white;
	border-radius: 20px;
	margin-top: 10px;
	padding: 15px 10px;
}
.commodity-content-shopName{
	color: gray;
}
.order-commodityContent-list-box{
	width: 100%;
}
.commodity_item{
	width: 100%;
	height: 70px;
	margin-top: 10px;
	position: relative;
}
.commodity_item_image{
	width: 70px;
	height: 70px;
	float:left;
}
.commodity_item_name{
	font-weight: bold;
}
.commodity_item_textbox{
	width: 62%;
	float:left;
	margin-left: 2%;
}
.commodity_item_remark{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	color: #A2A0A1;
	margin-top: 2px;
}
.commodity_item_price_box{
	position: absolute;
	right: 10px;
	top: 10px;
}
.commodity_item_price{
	font-size: 18px;
	font-weight: bold;
}
.commodity_item_priced{
	font-size: 16px;
	color: gray;
	text-decoration:line-through;
	text-align: right;
}
.taking-order-box{
	width: 100%;
	height: 60px;
	position: absolute;
	bottom: 0;
	left: 0;
	box-shadow: 0px -1px 10px gainsboro;
	background-color: white;
}
.taking-order-btn{
	width: 100px;
	position: absolute;
	top: 10px;
	right: 10px;
}
.pack-price-box{
	width: 100%;
	position: relative;
	line-height: 30px;
}
.order-address-box{
	width: 95%;
	height: 200px;
	background-color:white;
	border-radius: 20px;
	padding: 10px;
}
.order-address{
	width: 100%;
	overflow: hidden;
	position: relative;
}
.order-address-itemaddress{
	width: 90%;
	font-weight: bold;
	font-size: 24px;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1; // 超出多少行
	line-height: 50px;
}
.order-address-itemconsignee{
	line-height: 20px;
	color: gray;
}
.deliveryTime-box{
	width: 100%;
	font-size: 18px;
	line-height: 60px;
	margin-top: 10px;
	overflow: hidden;
}
.pay-mode-box{
	width: 100%;
	font-size: 18px;
	line-height: 60px;
	overflow: hidden;
}
.order-else-box{
	width: 95%;
	background-color:white;
	border-radius: 20px;
	margin-top: 10px;
	padding: 10px;
}
.order-price-total-box{
	line-height: 55px;
	float:right;
	margin-right: 125px;
}
.order-discounts-box{
	width: 95%;
	background-color:white;
	border-radius: 20px;
	margin-top: 10px;
	padding: 10px;
}
.u-popup-slot {
	width: 200px;
	height: 350px;
	@include flex;
	justify-content: center;
	align-items: center;
}
.u-popup-slot-address{
	width: 90%;
	height: 350px;
	@include flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
}
.popup-address-item{
	width: 100%;
	height: 100px;
	border-bottom: 1px solid gainsboro;
	position: relative;
}
.popup-address-item-itemaddress{
	width: 90%;
	font-weight: bold;
	font-size: 18px;
	overflow: hidden;
	display: -webkit-box;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1; // 超出多少行
	line-height: 50px;
}
.popup-address-item-itemconsignee{
	line-height: 20px;
	color: gray;
}
.popup-address-item-btn{
	width: 50px;
	position: absolute;
	right: 10px;
	bottom: 5px;
}
.u-popup-slot-discounts{
	width: 90%;
	height: 350px;
	@include flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	background-color: #F6F6F6;
}
.shopCoupon-item-box{
	width: 95%;
	height: 60px;
	background-color: white;
	border-radius: 20px;
	overflow: hidden;
	padding: 30px 10px;
}
.shopCoupon-item-box-header{
	width: 30%;
	text-align: center;
	float:left;
}
.shopCoupon-item-box-main{
	width: 55%;
	line-height: 30px;
	float:left;
}
.shopCoupon-item-box-foot{
	width: 15px;
	float:left;
	text-align: center;
	margin-left: 10px;
}
</style>
